<template>
    <div class="order-list">
        <ul>
            <li v-for="(item, index) in activeFoodList">
                <div class="name">
                    <img v-lazy="renderImg(item.cui_info.cui_cover)" v-if="showImg"/>
                    <span>{{item.cui_info.cui_name}} {{item.dimen | filterDimen}}</span>
                </div>
                <div class="price-info">
                    <div class="price">￥{{item.price || '0.00'}}</div>
                    <div class="step">
                        <img src="../common/img/minus-circle.svg"
                             :class="[item.copies > 0 ? '' : 'hidden']"
                             @click="minusCopies(item)"/>
                        <span :class="[item.copies > 0 ? '' : 'hidden']"
                              @click="changeCopies(item)">{{item.copies}}</span>
                        <img src="../common/img/plus-circle.svg" @click="plusCopies(item)"/>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        props: ['activeFoodList', 'showImg'],
        filters: {
            filterDimen(val){
                if (val == '/') {
                    return ''
                } else {
                    return `(${val})`
                }

            }
        },
        methods: {
            plusCopies(item){
                this.$emit('plusCopies', item);
            },
            minusCopies(item){
                this.$emit('minusCopies', item);
            },
            changeCopies(item){
                this.$emit('changeCopies', item);
            }
        }
    }
</script>
<style lang="less" scoped>
    .order-list {
        background: #FFFFFF;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10);
        height: 280px;
        font-size: 18px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        ul {
            li {
                display: flex;
                justify-content: space-between;
                height: 60px;
                line-height: 60px;
                padding: 0 20px;
            }
            li + li {
                border-top: 1px solid #EDEDED;;
            }
            .name {
                img {
                    width: 40px;
                    height: 40px;
                    vertical-align: super;
                    margin-right: 10px;
                    background: #eee;
                }
                span {
                    display: inline-block;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    max-width: 130px;
                }
            }
            .price-info {
                display: flex;
                width: 140px;
                justify-content: space-between;
            }
            .num {
                margin-left: 10px;
            }
            .price {
                color: #FF5B29;
            }
            .step {
                display: flex;
                width: 56px;
                justify-content: space-between;
                font-size: 12px;
                line-height: 60px;
                img {
                    width: 20px;
                }
                span {
                    flex: 1;
                    text-align: center;
                }
                .hidden {
                    visibility: hidden;
                }
            }
        }
    }
</style>